<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="/css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="/css/swiper.min.css">
    <link href="/css/common.css" rel="stylesheet" />
    <style type="text/css">
		.mui-content {
			padding-bottom: 68px;
		}


		.section-wrapper {
			margin-top: 8px;
			border-top: solid .5px #D4D4D4;
		}

		.tool-wrapper {
			position: fixed;
			width: 100%;
			height: 48px;
			bottom: 0;
			z-index: 999;
		}

		.tool-wrapper .mui-table-view.mui-grid-view {
			padding: 0;
		}

		.tool-wrapper .mui-table-view.mui-grid-view .mui-table-view-cell {
			margin: 0;
			padding: 0;
			height: 48px;
		}

		.tool-wrapper .mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn) {
			margin: 0;
		}

		.tool-wrapper .mui-table-view-cell>a:not(.mui-btn) {
			padding: 0;
		}

		.mui-table-view.mui-grid-view .mui-table-view-cell.mui-table-view-cell-fav {
			background: url(../../images/system/uncollect.png) no-repeat center 8px;
			background-size: 19px;
			color: #898989;
			font-size: 12px;
			padding-top: 25px;
			border-right: solid 1px #eee;
		}

		.mui-table-view.mui-grid-view .mui-table-view-cell.mui-table-view-cell-fav.mui-table-view-cell-faved {
			background-image: url(../../images/system/collected.png);
		}

		.mui-table-view.mui-grid-view .mui-table-view-cell.mui-table-view-cell-cart {
			background: url(../../images/system/nav_cart.png) no-repeat center 8px;
			background-size: 19px;
			color: #898989;
			font-size: 12px;
			padding-top: 25px;
		}

		.mui-table-view.mui-grid-view .mui-table-view-cell.mui-table-view-cell-cart-add {
			background: #777777;
			font-size: 16px;
			color: #FFF;
			line-height: 48px;
			font-weight: 700;
		}

		.mui-table-view.mui-grid-view .mui-table-view-cell.mui-table-view-cell-order {
			background: #E73268;
			font-size: 16px;
			color: #FFF;
			line-height: 48px;
		}

		.detail-wrapper {
			padding: 13px 20px;
			background: #fff;
		}

		.prod-no {
			text-align: left;
			font-size: 18px;
			font-weight: bold;
			color: #010101;
		}

		.prod-desc {
			margin-top: 16px;
			text-align: left;
			font-size: 14px;
			font-weight: 400;
			color: #000;
			white-space: normal;
			margin-bottom: 16px;
		}

		.prod-price {
			float: left;
			font-size: 22px;
			font-weight: 400;
			color: #E73268;
		}

		.prod-views {
			float: right;
			font-size: 12px;
			font-weight: 400;
			color: #555;
		}

		.price-wrapper {
			overflow: hidden;
		}

		.sku-wrapper {
			display: table;
			margin-top: 29px;
		}

		.sku-wrapper li {
			display: table-cell;
			font-size: 11px;
			color: #555;
		}

		.sku-wrapper li:last-child {
			text-align: right;
		}

		.section-wrapper {
			background: #fff;
		}

		.section-header {
			height: 37px;
			line-height: 37px;
			text-align: center;
			font-size: 14px;
			font-weight: 400;
			border-bottom: solid 1px #eee;
		}

		.cate-wrapper {
			height: 220px;
		}

		.relaProd-wrapper .mui-segmented-control {
			border: 0;
			top: 0;
			font-size: 14px;
			padding-left: 6px;
		}

		.relaProd-wrapper .mui-table-view.mui-grid-view {
			overflow-x: scroll;

		}

		.relaProd-wrapper .mui-table-view.mui-grid-view {
			white-space: nowrap;
		}

		.relaProd-wrapper .mui-table-view.mui-grid-view .mui-table-view-cell {
			width: 150px;
		}

		.relaProd-wrapper .mui-table-view.mui-grid-view .mui-table-view-cell:nth-of-type(odd) {
			border-right: 0;
		}

		.section-content {
			width: 100%;
			overflow: hidden;
		}

		.color-body {
			overflow: hidden;
			padding-top: 8px;
		}

		.color-body li {
			width: 25%;
			float: left;
			text-align: center;
			margin-bottom: 14px;
		}

		.color-body li img {
			border-radius: 8px;
			width: 70%;
			height: auto;
		}

		.color-body li span {
			font-size: 12px;
			color: #555;
			display: block;
		}

		.prod-wrapper {
			background: #fff;
		}

		.mui-control-content {
			min-height: 600px;
		}
		a.top {
			position:fixed;
			right: 20px;
			bottom: 60px;
			z-index: 999;

			margin: 3px;
			width: 50px;
			height: 50px;
			display: inline-block;
			text-align: center;
			background-color: #fff;
			border: 1px solid #ddd;
			border-radius: 25px;
			background-clip: padding-box;
			background: #000;
			opacity: .3;
		}
		a.top .mui-icon {
			margin-top: 6px;
			color: #fff;
			font-size: 34px;
			font-weight: bold;
		}
		.content-describe img {
			width: 100%;
			height: auto;
		}
	</style>
</head>
@verbatim
<body>
    <div id="app" v-cloak class="mui-content">
        <div class="swiper-container swiper-container1">
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide" v-for="s in slideshows">
                    <img :style="{height:(clientWidth+'px')}" :src="s.pic">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="detail-wrapper">
            <div class="prod-no">
                {{sn}}
            </div>
            <div class="prod-desc">
                {{abstract}}
            </div>
            <div class="price-wrapper">
                <span class="prod-price">
                    ￥{{price}}
                </span>
                <span class="prod-views ">
                    浏览 {{read_num}}
                </span>
            </div>
            <ul class="sku-wrapper">
                <li>规格 {{length}}*{{wide}}cm</li>
                <li>克重 {{gram_weight}}g</li>
                <li>工艺 {{technology}}</li>
            </ul>
        </div>
        <div class="section-wrapper color-wrapper">
            <div class="section-header">颜色</div>
            <ul class="color-body">
                <li v-for="c in prodInfo.colors">
                    <img :src="c.pic" alt="">
                    <span class="color-title">{{c.title}}</span>
                </li>
            </ul>
        </div>
        <div v-if="relaProds.length" class="section-wrapper">
            <div class="section-header">相关产品</div>
            <div class="cate-wrapper relaProd-wrapper">
                <div class="inner">
                    <div id="segmentedControl" class="mui-segmented-control mui-table-view mui-grid-view mui-grid-view-prod">
                        <div @tap="enterDetail(item)" class="mui-table-view-cell mui-media  mui-table-view-cell-prod" v-for="item in relaProds">
                            <img class="mui-media-object" :src="item.pic">
                            <div class="mui-media-detail">
                                <div class="mui-media-body prod-no">
                                    {{item.sn}}
                                </div>
                                <div class="mui-media-body prod-desc">
                                    {{item.abstract}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section-wrapper">
            <div class="section-header">产品描述</div>
            <div class="section-content content-describe">
                <span v-html="prodInfo.describe"></span>
            </div>
        </div>
    </div>

    @endverbatim
    <script src="/js/mui.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/swiper.min.js"></script>
    <script type="text/javascript">
        /**
* get parameters from url
* @method getQuery
* @param {String} key
* @param {String} url
* @return {String | Array}
*/

        function getQuery(key, url) {
            url = url || window.location.href;
            var rts = [], rt;
            queryReg = new RegExp('(^|\\?|&)' + key + '=([^&]*)(?=&|#|$)', 'g');
            while ((rt = queryReg.exec(url)) != null) {
                rts.push(decodeURIComponent(rt[2]));
            }
            if (rts.length == 0) return null;
            if (rts.length == 1) return rts[0];
            return rts;
        }

        /**
        * set parameters for url
        * @method setQuery
        * @param {String} key
        * @param {String | Array} value
        * @param {String} url
        * @return {String}
        */

        // function setQuery(key, value, url) {
        //     url = url || window.location.href;
        //     url = url.replace(new RegExp('(^|\\?|&)' + key + '=[^&]*(?=&|#|$)', 'g'), '');
        //     value = Array.isArray(value) ? value : [value];

        //     for (var i = value.length - 1; i >= 0; i--) {
        //         value[i] = encodeURIComponent(value[i]);
        //     }

        //     var p = key + '=' + value.join('&' + key + '=');
        //     return url + (/\?/.test(url) ? '&' : '?') + p;
        // }

        var id = getQuery('id');
        var api = 'http://www.jlycph.com:8000/api/goods';

        var vm = new Vue({
            el: '#app',
            data: {
                clientWidth: '100%',
                slideshows: [],
                sn: '',
                abstract: '',
                price: '',
                read_num: 0,
                length: 0,
                wide: 0,
                gram_weight: 0,
                technology: '',
                colors: [],
                describe: '',
                prodInfo:{},
                relaProds: []
            },
            methods: {
                enterDetail: function (prod) {
                    var id = prod.id;
                    var url = window.location.href;
                    window.location.href = url.replace(/\?id=\d+/, '?id=' + id);
                    //window.location.href = 'http://192.168.0.11:8000/zhongxu/jly/share/share.html?id=' + id;
                }
            },
            mounted: function () {
                mui.later(function () {
                    var mySwiper1 = new Swiper('.swiper-container1', {
                        loop: true,
                        pagination: {
                            el: '.swiper-pagination'
                        }
                    });
                }, 500);
            }

        });




        getProdInfo();

        function getProdInfo() {
            mui.getJSON(api + '/' + id, function (rsp) {
                var prodInfo = rsp.data;
                vm.prodInfo = prodInfo;
                if (prodInfo.slideshows) {
                    vm.slideshows = prodInfo.slideshows;
                }

                vm.sn = prodInfo.sn;
                vm.abstract = prodInfo.abstract;
                vm.price = prodInfo.price;
                vm.read_num = prodInfo.read_num;
                vm.length = prodInfo.length;
                vm.wide = prodInfo.wide;
                vm.gram_weight = prodInfo.gram_weight;
                vm.technology = prodInfo.technology;

                if (prodInfo.colors) {
                    vm.colors = prodInfo.colors;
                }
                vm.describe = prodInfo.describe;
                if (prodInfo.products) {
                    vm.relaProds = prodInfo.products;
                }
            });
        }

        var clientWidth = mui('body')[0].offsetWidth;
        vm.clientWidth = clientWidth;
        mui.init();











        (function ($) {
            $('.mui-scroll-wrapper').scroll({
                indicators: true //是否显示滚动条
            });

        })(mui);







    </script>
</body>

</html>